<style>
.square {
  width: 100%;
}
.square:before {
  content: " ";
  display: block;
  padding-top: 100%;
}
</style>
<div class="content">
  <div class="list">
    <div class="item">
      <div class="content">
        <p>旋转设备屏幕或者更改浏览器窗口宽度，下方的红色矩形方块会保持 1:1 的比例。</p>
        <div class="box"><div class="red square"></div></div>
        <div><pre class="prettyprint"><code>&lt;div class=&quot;red square&quot;&gt;&lt;/div&gt;</code></pre></div>
        <div><pre class="prettyprint"><code>.square {
  width: 100%;
}
.square:before {
  content: " ";
  display: block;
  padding-top: 100%;
}</code></pre></div>
        <div class="article">
          <p>参考：</p>
          <ul>
            <li><a href="https://idiotwu.me/css-responsive-square/" target="_blank">https://idiotwu.me/css-responsive-square/</a></li>
          </ul>
        </div>
      </div>
     </div>
  </div>
</div>
